<template>
	<view class="main-page">
		<view class="status_bar"></view>
		<view class="top-wrap">
			<view class="pad"></view>
			<view class="">
				<view v-for="(tab,index) in tabBars" :key="index" class="tab-item" @click="ontabtap(tab,index)">
					<view class="tab-item-title" :class="tabIndex==index ? 'tab-item-title-active' : ''">{{tab}}</view>
				</view>
			</view>
			<view v-if="publishState==1" class="search-wrap">
				<view class="search"></view>
			</view>
			<view v-if="publishState==2" class="search-wrap">
				<image class="search" src="../../static/img/search.png"></image>
			</view>
		</view>
		<view class="divider-line"></view>
		<view v-if="tabIndex==0" class="attention-page">

			<view v-if="publishState==1" class="item-wrap" v-for="(item,index) in coverList" :key="index"
				@click="onTapItemCover(item.id)">
				<view class="cover-wrap">
					<image :src="item.picUrl" mode="aspectFill" class="cover" lazy-load="true"></image>
					<image src="../../static/img/play.png" mode="" class="icon-play"></image>
				</view>

			</view>
			<view v-if="publishState==2" class="item-wrap" v-for="(item,index) in videoList" :key="index"
				@click="onTapItem(item.id)">
				<view class="cover-wrap">
					<image :src="item.picUrl" mode="aspectFill" class="cover" lazy-load="true"></image>
					<image v-if="item.videoUrl" src="../../static/img/play.png" mode="" class="icon-play"></image>
				</view>

				<view class="item-content">
					<view class="item-title">{{item.title}} | {{item.content}}</view>
					<view class="user-wrap">
						<view class="user">
							<!-- <image :src="item.headUrl?item.headUrl:defaultAvatar" mode="aspectFill" class="avatar"></image> -->
							<image v-if="item.headUrl" :src="item.headUrl" mode="aspectFill" class="avatar"></image>
							<image v-else src="../../static/img/logo32X32.png" mode="aspectFill" class="avatar"></image>
							<view class="nickname">{{item.mchName?item.mchName:'用户'}}</view>
						</view>
						<view v-if="publishState==2" class="awards">
							<image src="../../static/img/awards.png" mode="aspectFill"></image>
							<view class="money">{{item.amount/100}}元</view>
						</view>
					</view>
				</view>
			</view>

		</view>
		<view v-if="tabIndex==1" class="attention-page">

			<view v-if="publishState==1" class="item-wrap" v-for="(item,index) in coverList" :key="index"
				@click="onTapItemCover(item.id)">
				<view class="cover-wrap">
					<image :src="item.picUrl" mode="aspectFill" class="cover" lazy-load="true"></image>
					<image src="../../static/img/play.png" mode="" class="icon-play"></image>
				</view>

			</view>
			<view v-if="publishState==2" class="item-wrap" v-for="(item,index) in videoList" :key="index"
				@click="onTapItem(item.id)">
				<view class="cover-wrap">
					<image :src="item.picUrl" mode="aspectFill" class="cover" lazy-load="true"></image>
					<image v-if="item.videoUrl" src="../../static/img/play.png" mode="" class="icon-play"></image>
				</view>

				<view class="item-content">
					<view class="item-title">{{item.title}} | {{item.content}}</view>
					<view class="user-wrap">
						<view class="user">
							<!-- <image :src="item.headUrl?item.headUrl:defaultAvatar" mode="aspectFill" class="avatar"></image> -->
							<image v-if="item.headUrl" :src="item.headUrl" mode="aspectFill" class="avatar"></image>
							<image v-else src="../../static/img/logo32X32.png" mode="aspectFill" class="avatar"></image>
							<view class="nickname">{{item.nickName}}</view>
						</view>
						<view v-if="publishState==2" class="awards">
							<image src="../../static/img/awards.png" mode="aspectFill"></image>
							<view class="money">{{item.amount/100}}元</view>
						</view>
					</view>
				</view>
			</view>

		</view>
		<view v-if="tabIndex==2" class="attention-page">
			<view class="item-wrap" v-for="(item,index) in videoList" :key="index" @click="onTapItem(item.id)">
				<view class="cover-wrap">
					<image :src="item.picUrl" mode="aspectFill" class="cover" lazy-load="true"></image>
					<image src="../../static/img/play.png" mode="" class="icon-play"></image>
				</view>

				<view class="item-content">
					<view class="item-title">{{item.title}} | {{item.content}}</view>
					<view class="user-wrap">
						<view class="user">
							<!-- <image :src="item.headUrl?item.headUrl:defaultAvatar" mode="aspectFill" class="avatar"></image> -->
							<image v-if="item.headUrl" :src="item.headUrl" mode="aspectFill" class="avatar"></image>
							<image v-else src="../../static/img/logo32X32.png" mode="aspectFill" class="avatar"></image>
							<view class="nickname">{{item.nickName}}</view>
						</view>
						<view v-if="publishState==2" class="awards">
							<image src="../../static/img/awards.png" mode="aspectFill"></image>
							<view class="money">{{item.amount/100}}元</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 		<uni-popup ref="popup" background-color="#fff">
			<view class="btn-wrap">
				<view class="btn-title">位置信息授权</view>
				<view class="btn-hint">获取您的位置信息，以提供您附近的商家推广信息</view>
				<button type="primary" @click="getLocation">点击授权</button>
			</view>
		</uni-popup> -->
		<!-- <view class="ad-view">
			<ad adpid="1111111111" @load="onload" @close="onclose" @error="onerror"></ad>
		</view>
		
		<ad-rewarded-video ref="adRewardedVideo" adpid="1507000689" :preload="false" :loadnext="false" :disabled="true"
		  v-slot:default="{loading, error}" @load="onadload" @close="onadclose" @error="onaderror">
		  <view class="ad-error" v-if="error">{{error}}</view>
		</ad-rewarded-video>
		<button type="primary" :disabled="isLoading" :loading="isLoading" @click="showAd" style="width: 92%;margin: 0 auto;">点击播放激励广告</button> -->

	</view>
</template>

<script>
	// import common from '../../common.js';
	export default {
		data() {
			return {
				tabBars: ['关注', '推荐'],
				isLoading: false,
				tabIndex: 0,
				pageList: ['', '', ''],
				videoList: [],
				defaultAvatar: '../../static/img/logo32x32.png',

				mainid: '',
				lat: '',
				lon: '',

				videoType: '', //视频类型
				redCount: 0, //观看视频累计红包金额
				publishState: 2,

				coverList: [{
						picUrl: "https://qiniu2.vworld365.com/images/20211027/32201635313459043.png",
						id: 1
					},
					{
						picUrl: "https://qiniu2.vworld365.com/images/20211027/72561635313681807.png",
						id: 2
					},
					{
						picUrl: "https://qiniu2.vworld365.com/images/20211027/68831635313722940.png",
						id: 3
					},
					{
						picUrl: "https://qiniu2.vworld365.com/images/20211027/88381635313763530.png",
						id: 4
					},
					{
						picUrl: "https://qiniu2.vworld365.com/images/20211027/65151635313810560.png",
						id: 5
					},
				]

			}
		},

		onLoad(option) {
			// uni.navigateTo({
			// 	url: '/pages/user/ad_product',
			// });
		},
		
		onReady() {
		      this.isLoading = true;
		      this.$refs.adRewardedVideo.load();
		},

		onShow() {
			uni.getStorage({
				key: 'user',
				success: res=>{
					this.mainid = res.data.id;
					this.getLocation()
					this.getPublishState()
					console.log("openid: ", this.mainid);
				}
			})
		},

		onReady() {
			this.saveData()
		},


		onReachBottom() {
			console.log('onReachBottom...')
			// this.showAd();
		},
		// onPullDownRefresh() {
		// 	console.log('onPullDownRefresh...')

		// },
		methods: {
			showAd() {
				if (this.isLoading) {
				  return
				}
				this.$refs.adRewardedVideo.show();
			},
			onadload(e) {
				this.isLoading = false;
				console.log('广告数据加载成功');
			},
			onadclose(e) {
				const detail = e.detail
				// 用户点击了【关闭广告】按钮
				if (detail && detail.isEnded) {
				  // 正常播放结束
				  console.log("onClose " + detail.isEnded);
				  this.rewardAdPost();
				} else {
				  // 播放中途退出
				  console.log("onClose " + detail.isEnded);
				}
				//this.isLoading = true;
				//this.$refs.adRewardedVideo.load();
			},
			onaderror(e) {
				// 广告加载失败
				console.log(e.detail);
				this.isLoading = false;
			},
			onload(e) {
			  console.log("onload");
			},
			onclose(e) {
			  console.log("onclose: " + e.detail);
			},
			onerror(e) {
			  console.log("onerror: " + e.detail.errCode + " message:: " + e.detail.errMsg);
			},
			// 激励视频保存视频记录
			rewardAdPost() {
				let data = {
					adId: "", //	广告ID(添加查看记录必填)		false	string
					adSource: 1,
					userId: this.mainid, //		用户ID		true	string
					plat:1
				}
				console.log("请求参数: ", data);
				let url = 'ad/saveViewVideoLog'
				// let test = getApp().globalData.url + url
				// console.log('请求地址：'+test);
				uni.request({
					header: {
						"Content-Type": "application/json", //自定义请求头信息
					},
					url: getApp().globalData.url + url,
					data: data,
					method: 'POST',
					success: (res) => {
						console.log('记录查看广告：', res)
						if (res.data.data.resultObj) {
							
						} else {
							uni.showToast({
								title: "激励视频奖励发放出现问题，请联系管理员！错误原因：" + res.data,
								icon: 'none',
								duration: 2000
							});
						}
					},
					fail: (err) => {
						console.log('记录查看广告 err：', err)
					}
				})
			},
			test() {
				// this.videoList = getApp().globalData.adList.slice(0,10) 
				this.videoList = getApp().globalData.adList
				//测试
				// let list = getApp().globalData.adList
				// for (var i = 0; i < 10; i++) {
				// 	this.videoList = this.videoList.concat(list)
				// }
			},

			ontabtap(tab, index) {
				this.tabIndex = index 
			},
			onChange(e) {

			},
			onTapItem(id) {
				uni.navigateTo({
					url: '/pages/index/video?id=' + id + '&redCount=' + this.redCount + '&mainid='+this.mainid,
					// url: '/pages/index/video-list?id=' + id + '&redCount=' + this.redCount,
					// url: '/pages/index/play?id=' + id + '&redCount=' + this.redCount,
				});

			},
			//抖音审核
			onTapItemCover(id) {
				uni.navigateTo({
					url: '/pages/index/video-check?id=' + id,
				});
			},

			getLocation() {
				uni.getLocation({
					success: (res) => {
						console.log('获取位置：', res)
						this.lat = res.latitude;
						this.lon = res.longitude;
						uni.setStorageSync('lat', res.latitude);
						uni.setStorageSync('lon', res.longitude);
						this.getVideoList()
					},
					fail: (err) => {
						console.log("err: ", err);
						setTimeout(res => {
							this.getLocation()
						}, 500);
					}
				});
			},

			getVideoList() {

				// if(this.publishState == 1){
				// 	return false
				// }

				let data = {
					"adId": "",
					"addressId": "",
					"tradeId": "",
					"userId": this.mainid,
					"lat": this.lat,
					"lon": this.lon,
					"plat": 1,
					//测试
					// "lat": "116.046232",
					// "lon": "36.460183",
				}
				console.log("视频列表请求参数: ", data);

				this.$request.post(`ad/getTradeVideoList`, data, 'json')
				// this.$request.post(`tiktok/video/getTradeVideoList`, data, 'json')
					.then(res => {
						console.log('视频列表：', res)
						this.redCount = res.data.data.redCount
						let list = []
						let datas = res.data.data.adList 
						
						for (let item of datas) {
							if (item.id == "1439790940185255938" || item.id == "1440585034528546818" ||
								item.id == "1450774588623474689" || item.id == "1450771332618833922") {

							} else {
								list.push(item)
							}
						}
						this.videoList = list
						if(this.videoList.length){
							this.saveData(datas)
						}

					}).catch(err => {
						console.log("视频列表 err:", err)
					})

			},

			saveData(data) {
				getApp().globalData.videoList = data
			},

			//获取发布状态
			getPublishState() {
				uni.getSystemInfo({
					success: (res) => {
						let brand = "";
						try{
							let brand  = res.brand.toLowerCase()
						}catch(e){
							//TODO handle the exception
							brand = "xiaomi"
						}
						let id = 1453982355387654100
						switch (brand){
							case 'xiaomi':
								id = 1456871784196436000;
								break;
							case 'huawei':
								id = 1456869585609388000;
								break;
							case 'vivo':
								id = 1456872496989040600;
								break;
							case 'oppo':
								id = 1456872951546736600;
								break;
							default:
								break;
						}
						uni.request({
							header: {
								"Content-Type": "application/x-www-form-urlencoded", //自定义请求头信息
							},
							url: getApp().globalData.url + 'admin/user/getAppletId/' + id,
							data: {
								id: id
							},
							method: 'POST',
							success: (res) => {
								console.log("app发布状态: ", res);
								this.publishState = res.data.data.state
								if (this.publishState == 2) {
									this.tabBars = ['关注', '任务', '推荐']
								} else {
									this.tabBars = []
								}
							}
						})
					}
				})
			},

		},

	}
</script>

<style>
	.ad-view {
	    background-color: #FFFFFF;
	    margin-bottom: 10px;
	}
	.main-page {
		/* flex: 1; */
		/* flex-direction: column; */
		/* height: 100vh; */
	}

	.main-page view {
		display: flex;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.top-wrap {
		justify-content: space-between;
		padding: 10upx 20upx 0;
		z-index: 99;
	}

	.pad {
		width: 54upx;
	}

	.tab-item {
		width: 120upx;
		height: 60upx;
		text-align: center;
		padding: 0 20upx;
	}

	.tab-item-title {
		width: 120upx;
		font-size: 38upx;
		color: black;
	}

	.tab-item-title-active {
		width: 120upx;
		color: #e9a822;
	}

	.search-wrap {
		padding: 10upx;
	}

	.search {
		width: 34upx;
		height: 34upx;
	}

	.divider-line {
		height: 2upx;
		width: 100%;
		background-color: #E9E9E9;
	}

	.swiper-box {
		/* flex: 1; */
	}

	.swiper-item {
		/* flex: 1; */
		flex-direction: row;
	}

	.scroll-v {
		/* flex: 1; */
		flex-direction: row;
		justify-content: space-between;
		/* width: 750rpx; */
		width: 100%;
		/* height: 100%; */
		flex-wrap: wrap;

	}

	.attention-page {
		flex-wrap: wrap;

	}

	.attention-page .item-wrap {
		width: 360upx;
		background-color: white;
		border-radius: 8upx;
		margin-top: 10upx;
		margin-bottom: 10upx;
		margin-left: 10upx;
		flex-direction: column;
		box-shadow: 0px 0px 5px #eee;

	}

	.attention-page .cover-wrap {
		position: relative;

	}

	.attention-page .icon-play {
		width: 32upx;
		height: 32upx;
		position: absolute;
		right: 30upx;
		top: 30upx;

	}

	.attention-page .cover {
		width: 360upx;
		height: 400upx;
		border-radius: 8upx;

	}

	.attention-page .item-wrap .item-content {
		flex-direction: column;
	}

	.attention-page .item-wrap .item-title {
		font-size: 26upx;
		margin: 10upx 10upx 0;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		/* 超出部分省略号 */
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 2;

	}

	.item-content .user-wrap {
		justify-content: space-between;
		margin: 10upx;
		align-items: center;
	}

	.item-content .user {
		align-items: center;
	}

	.item-content .user .avatar {
		width: 32upx;
		height: 32upx;
		border-radius: 50%;
	}

	.user .nickname {
		font-size: 22upx;
		color: #333333;
		margin-left: 6upx;
	}

	.item-content .awards {
		align-items: center;
	}

	.item-content .awards image {
		width: 28upx;
		height: 28upx;
		margin-right: 6upx;
	}

	.item-content .awards .money {
		font-size: 22upx;
		flex-wrap: nowrap;
	}

	.btn-wrap {
		width: 500upx;
		height: 400upx;
		background-color: white;
		border-radius: 16upx;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.btn-wrap .btn-title {
		font-size: 34upx;
		font-weight: 600;
	}

	.btn-wrap .btn-hint {
		font-size: 30upx;
		padding: 0 60upx;
		margin-top: 40upx;
	}

	.btn-wrap button {
		width: 400upx;
		height: 60upx;
		line-height: 60upx;
		margin-top: 30upx;
		font-size: 28upx;
		border-radius: 30upx;
	}
</style>
